<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$Think.config.admin_title}</title>
    <link rel="stylesheet" href="/static/service/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/service/css/laykefu.css">
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo" style="color: white">{$uinfo['user_name']}</div>
            <ul class="layui-nav layui-layout-right">
                <li style="margin-top: 10%">
                    <a href="javascript:;" onclick="loginOut();">
                        <button class="layui-btn layui-bg-red">
                        <i class="layui-icon">&#xe609;</i> 退出下班
                    </button>
                    </a>
                </li>
            </ul>
        </div>

        <div class="layui-side" style="background:#f2f2f2">
            <div class="layui-side-scroll">
                <blockquote class="layui-elem-quote layui-bg-cyan" style="color: white">正在咨询的会员</blockquote>
                <ul class="layui-unselect" id="user_list">

                </ul>
            </div>
        </div>

        <div class="layui-body" style="bottom:0">
            <input type="hidden" id="active-user" data-avatar="" data-name="" data-id="">
            <!-- 当前对话的用户 -->
            <div class="chat-left">
                <div class="chat-box laykefu-chat-main">

                </div>
                <div class="msg-send">
                    <div class="tools-bar">
                        <i class="layui-icon" style="font-size: 30px;" id="face">&#xe60c;</i>
                        <i class="layui-icon" style="font-size: 30px;" id="image">&#xe60d;</i>
                        <i class="layui-icon" style="font-size: 30px;" id="file">&#xe61d;</i>
                    </div>
                    <div class="msg-box">
                        <textarea class="msg-area" id="msg-area"></textarea>
                    </div>
                    <div class="send-area">
                        <span style="margin-left:10px;color:gray">快捷键 Enter</span>
                        <button class="layui-btn layui-btn-small layui-bg-cyan" style="float:right;margin-right:10px;height: 40px;padding: 0 15px;" id="send">
                        <i class="layui-icon">&#xe609;</i>发送
                    </button>
                    </div>
                </div>
            </div>

            <div style="width:28%;height:100%;float:left;margin-left:1%">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">访客信息</li>
                        <li>常用语</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100px;">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">顾客昵称</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-user" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">顾客姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-user_name" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">手机号</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-mobile" class="layui-input" readonly>
                                    </div>
                                </div>
                                <!-- <div class="layui-form-item">
                                    <label class="layui-form-label">IP</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-ip" class="layui-input" readonly>
                                    </div>
                                </div> -->
                                <!-- <div class="layui-form-item">
                                    <label class="layui-form-label">地区</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-area" class="layui-input" readonly>
                                    </div>
                                </div> -->
                                <div class="layui-form-item">
                                    <label class="layui-form-label">客服</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-service" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">事业中心</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-shop" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">门店</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-department" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">销售老师</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="f-market" class="layui-input" readonly>
                                    </div>
                                </div>
                                <!-- {if(1 == $status['change_status'])}
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-bg-cyan" style="cursor: pointer;color:white" id="scroll-link">转接</label>
                            </div>
                            {/if} -->
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>内容</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {foreach name="word" item="vo"}
                                        <tr>
                                            <td>{$vo.content}</td>
                                            <td>
                                                <a href="javascript:;" onclick="sendWord(this)" data-word="{$vo.content}" style="color:#009688">应用</a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 转接提示层 -->
    <div class="layui-form" id="change-box" style="display: none">
        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">选择分组</label>
            <div class="layui-input-block" style="width: 70%">
                <select lay-verify="required" lay-filter="group">
                <option value=""></option>
                {if !empty($groups)}
                {foreach name="groups" key="i" item="vo"}
                <option value="i">{$vo}</option>
                {/foreach}
                {/if}
            </select>
            </div>
        </div>
    </div>
    <!-- 转接提示层 -->

    <script src="/static/customer/js/jquery.min.js"></script>
    <script src="/static/service/js/layui/layui.js"></script>
    <script>
        var uid = "{$uinfo['id']}";
        var uname = "{$uinfo['user_name']}";
        var avatar = "{$uinfo['user_avatar']}";
        var role = "{$uinfo['role']}";
        var socket_server = "{$socket}";
    </script>
    <script type="text/javascript" src="/static/service/js/functions.js"></script>
    <script src="/static/service/js/reconnecting-websocket.js"></script>
    <script type="text/javascript" src="/static/service/js/laykefu.js"></script>
</body>

</html>